<template>
  <header class="header-custome">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <a class="navbar-brand">
            <img
              :src="require('@/assets/image/logo.png')"
              class=""
              height="60"
            />
          </a>
        </div>
      </div>
    </div>
  </header>
  <nav class="navbar navbar-expand-md nav-custome sticky-top">
    <div class="container">
      <button
        class="navbar-toggler collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarsExample08"
        aria-controls="navbarsExample08"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-collapse collapse" id="navbarsExample08" style="">
        <ul class="navbar-nav">
          <template v-for="(item, index) in menuData" :key="index">
            <template v-if="item.children">
              <li class="nav-item dropdown" v-if="item.isShow">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  {{ item.title }}
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <template
                    v-for="(child, index) in item.children"
                    :key="index"
                  >
                    <li>
                      <a
                        class="dropdown-item"
                        @click="jumpLink(child.url)"
                        :title="child.url"
                      >
                        {{ child.title }}
                      </a>
                    </li>
                  </template>
                </ul>
              </li>
            </template>
            <template v-else>
              <li class="nav-item" v-if="item.isShow">
                <a
                  class="nav-link"
                  @click="jumpLink(item.url)"
                  :title="item.url"
                >
                  {{ item.title }}
                </a>
              </li>
            </template>
          </template>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  computed,
  getCurrentInstance,
  watch,
} from "vue";
import { useStore } from "vuex";
import BaseInfo from "@/datas/BaseInfo.json";

export default {
  name: "BaseHeader1",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      menuData: BaseInfo.menuData,
      //
      headerClass: "header fixed-top",
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      // document.addEventListener("scroll", function () {
      //   methods.onHeaderScolled();
      // });
    });
    //
    const store = useStore();
    //
    const computedData = {
      lang: computed(() => store.state.i18n.language),
      //
    };
    //

    //
    const methods = {
      changeLanguage: function () {},
      changeLanguage1: () => {
        console.log("当前语言", store.state.i18n.language);
        var lang = computedData.lang.value == "zh" ? "en" : "zh";
        //切换语言
        proxy.$i18n.locale = lang;
        //保存切换语言
        store.dispatch("setAppLanguage", lang);
      },
      onHeaderScolled() {},
      jumpLink(url) {
        proxy.$router.push(url);
      },
    };
    //
    return {
      ...refData,
      //
      ...computedData,
      //
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.header-custome {
  background-color: #f8f9fa;

  padding: 10px 0;
}

.navbar-toggler {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280, 0, 0, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e");
}

.nav-custome {
  background-color: #f8f9fa;
  box-shadow: 1px 2px 8px 0 rgba(204, 204, 204, 0.4);
  padding: 0;

  ul.navbar-nav {
    width: 100%;

    .nav-link {
      padding: 0;
    }

    a {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.8em;
    }

    li.nav-item {
      width: 25%;
      //   display: table-cell;

      a {
        letter-spacing: 0;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
        color: #000;
        text-transform: uppercase;
      }

      a:hover {
        letter-spacing: 0;
        font-size: 15px;
        color: #1b4484;
      }
    }

    li.nav-item:hover {
      background-color: #f6c00d;
    }

    .dropdown-menu {
      width: 100%;

      .dropdown-item {
        padding: 0.25rem 1rem;
        color: #21243b;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        border: 0;
      }

      .dropdown-item:hover {
      }
    }
  }
}
</style>
